<template>
	<tm-app ref="app">
		<tm-navbar title="修改信息" color="orange" linear="right" beforeBack="false" hideHome="false"
			@click="backPage"></tm-navbar>
		<tm-form @submit="confirm" v-model="entity" ref="form" :label-width="190">
			<!--
			<tm-divider align="left" label="基本信息"></tm-divider>-->

			<tm-form-item required label="姓名" label-width="0">
				<tm-input :inputPadding="[0, 0]" v-model.lazy="entity.name" :transprent="true" :showBottomBotder="false"> </tm-input>
			</tm-form-item>
			<tm-form-item required label="证件号码" label-width="0">
				<tm-input :inputPadding="[0, 0]" v-model.lazy="entity.cardno" :transprent="true" :showBottomBotder="false"> </tm-input>
			</tm-form-item>
			<!--
			<tm-input v-model="entity.name" required prefixLabel="姓名:" :margin="[0,10]" focusColor="orange"></tm-input>
			<tm-input v-model="entity.cardno" required prefixLabel="证件号码:" :margin="[0,10]"
				focusColor="orange"></tm-input>-->
			<!--
			<tm-input v-model="entity.stuname" required prefixLabel="学生姓名:" :margin="[0,10]"
				focusColor="orange"></tm-input>
			
			<tm-divider align="left" label="位置"></tm-divider>
			<tm-cell @click="showdateq = true" title="选择区域:" :right-text="entity.addr || '请选择'"
				focusColor="orange"></tm-cell>
			<tm-picker v-model:show="showdateq" :columns="citydate3" v-model="entity.addr"
				v-model:model-str="entity.addr"></tm-picker>-->
			<!--<tm-input v-model="entity.addr" required prefixLabel="区域:" :margin="[0,10]"
				focusColor="orange"></tm-input>
			<tm-input v-model="entity.addrDetail" required prefixLabel="详细地址:" :margin="[0,10]"
				focusColor="orange"></tm-input> -->
			<!--
			<tm-divider align="left" label="验证"></tm-divider>
			<tm-input v-model.lazy="entity.phone" required prefixLabel="联系方式:" :margin="[0,10]"
				focusColor="orange"></tm-input>
			<tm-input v-model="entity.code" required @search="sendMessage()" prefixLabel="验证码:" focusColor="orange"
				:margin="[0,10]" searchLabel="获取"></tm-input>
			-->
			<tm-form-item required label="选择区域" labelWidth="0">
				<tm-cell @click="showdateq = true" :right-text="entity.addr || '请选择区域'" focusColor="orange"></tm-cell>
				<tm-picker v-model:show="showdateq" :columns="citydate3" v-model="entity.addr"
					v-model:model-str="entity.addr"></tm-picker>
			</tm-form-item>
			<tm-form-item required label="详细地址" labelWidth="0">
				<tm-input :inputPadding="[0, 0]" v-model="entity.addrDetail" :transprent="true"
					:showBottomBotder="false" placeholder="请输入详细地址"></tm-input>
			</tm-form-item>
			
			
			
			<tm-form-item :border="false">
				<view class=" flex flex-row">
					<view class="flex-1 mr-32">
						<tm-button form-type="submit" color="orange" label="提 交" followTheme="true" block></tm-button>
					</view>
				</view>
			</tm-form-item>
			<tm-form-item :border="false">
				<view class=" flex flex-row">
					<tm-checkbox @change="allChange" color="orange"></tm-checkbox>
					<tm-text color="blue" label="请认真阅读并了解注意事项，并同意《用户服务协议》及《隐私政策》" @click="loadXyContent()"></tm-text>
				</view>
			</tm-form-item>
		</tm-form>
		
		<tm-message ref="msg" :lines="5"></tm-message>
	</tm-app>
</template>


<script lang="ts" setup>
	import { ref, nextTick } from "vue"
	import { onLoad } from "@dcloudio/uni-app"
	import { isPhone, isEmpty, isIdCard } from "@/tmui/tool/function/util";
	import tmMessage from "@/tmui/components/tm-message/tm-message.vue";
	import { getDetailBywxid, upByJz } from '@/api/jzdetail'


	const msg = ref<InstanceType<typeof tmMessage> | null>(null)
	const userid = ref("");
	const placement = ref('top')
	const showdateq = ref(false);
	const xyflag = ref(false);
	const citydate3 = ref([
		{ text: "东港区", id: 0, children: [{ text: "日照街道", id: 100 }, { text: "秦楼街道", id: 101 }, { text: "石臼街道", id: 102 }] }, { text: "经开区", id: 2, children: [{ text: "北京路街道", id: 200 }, { text: "奎山街道", id: 201 }] }, { text: "山海天", id: 3, children: [{ text: "卧龙山街道", id: 300 }, { text: "两城街道", id: 301 }] }, { text: "高新区", id: 4, children: [{ text: "香河街道", id: 400 }] },
	]);
	const entity = ref({
		name: "",
		cardno: "",
		stuname: "",
		addr: "",
		phone: "",
		code: "",
		wxid: "",
		addrDetail: ""
	})
	onLoad(() => {
		userid.value = uni.getStorageSync("userid");
		if (isEmpty(userid.value)) {
			uni.redirectTo({
				url: '/pages/auth/auth'
			})
		}
		// 加载家长基础数据
		loadJzDetail();
	});

	const loadJzDetail = async () => {
		let param = { "wxid": userid.value };
		const result = await getDetailBywxid(param);
		console.log(JSON.stringify(result));
		entity.value = result;
	}

	function allChange(e : any) {
		// console.log(e);
		xyflag.value = e;
	}
	function loadXyContent() {
		uni.navigateTo({
			url: `/pages/news/xynews?id=9`
		})
	}

	function confirm() {
		// 
		if (!xyflag.value) {
			msg.value.show({ model: 'error',text: '请同意协议' })
			return false;
		}
		if (isEmpty(entity.value.name)) {
			msg.value.show({ model: 'error',text: '姓名不能为空' })
			return false;
		}
		if (isEmpty(entity.value.cardno)) {
			msg.value.show({ model: 'error',text: '证件号码不能为空' })
			return false;
		}
		if (!isIdCard(entity.value.cardno)) {
			msg.value.show({ model: 'error',text: '请输入正确的证件号码！' })
			return false;
		}
		// if (isEmpty(entity.value.cardno)) {
		// 	msg.value.show({ model: 'error',text: '请同意协议' })
		// 	nextTick(() => {
		// 		msg.value.show({ model: 'error', label: "证件号码不能为空！" })
		// 	})
		// 	return false;
		// }
		// if (!isIdCard(entity.value.cardno)) {
		// 	nextTick(() => {
		// 		msg.value.show({ model: 'error', label: "请输入正确的证件号码！" })
		// 	});
		// 	return false;
		// }
		// console.log(entity.value.addr);
		// if (isEmpty(entity.value.stuname)) {
		// 	nextTick(() => {
		// 		msg.value.show({ model: 'error', label: "学生姓名不能为空！" })
		// 	})
		// 	return false;
		// }
		if (isEmpty(entity.value.addr)) {
			msg.value.show({ model: 'error',text: '区域不能为空' })
			return false;
		}
		if (isEmpty(entity.value.addrDetail)) {
			msg.value.show({ model: 'error',text: '地址不能为空' })
			return false;
		}

		// console.log(entity.value);

		updateJzDetail();


		return true;
	}

	const updateJzDetail = async () => {
		const result = await upByJz(entity.value);
		msg.value.show({ model: 'success',text: '保存成功' })
	}


	function backPage(e : any) {
		// console.log(JSON.stringify(e));
		uni.redirectTo({
			url: '/pages/index/my'
		})
	}
</script>